import React, { useState } from "react";
import "./filefolder.less";

type fileFolderProps = {
    show?: boolean,
    children?: React.ReactNode | Array<React.ReactNode>,
    title?: string | React.ReactNode,
    key?:any,
    childHeight:number
    className?:string;
    closeAnimation?:boolean;
    icon?:React.ReactElement;
}

export function FileFolder(props: fileFolderProps) {
    const [isShow, setShow] = useState(props.show ? props.show : false)

    const toggleShow = (e:any) => {
        console.log(e)
        if(props.children) {
            setShow((isShow): boolean => {
                setShow(!isShow);
                return true;
            });
        }
    }

    return (
        <div>
            <div
                className={`menu-btn ${isShow?"open":""} ${props.children?"":"empty"} ${props.className}`}
                onClick={toggleShow}
            >
                {props.icon?props.icon:""}
                {props.title}
            </div>
            <div
                className={isShow ? "menu-show" : "menu-hide"}
                style={{
                    maxHeight: (() => {
                        if(!props.closeAnimation) {
                            return (isShow&&props.children?((props.children as Array<React.ReactNode>).length?(props.children as Array<React.ReactNode>).length*props.childHeight+8:props.childHeight):0)
                        } else {
                            return isShow?2000:0
                        }
                    })(),
                    transition:!props.closeAnimation?"all 0.2s ease":(isShow?"all 0.8s ease":"all 0.6s cubic-bezier(0,.98,.64,1.3)")
                }}
            >
                <div className="menu-list">
                    {props.children}
                </div>
            </div>
        </div>
    )
}
